<template>
  <div>
    <el-table
      :data="reset"
      :header-cell-style="{background:'#f4f4f4'}"

      border
      class="schTable"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
      >
      </el-table-column>
      <el-table-column
        :index="indexMethod"
        align="center"
        label="序号"
        type="index"
        width="49">

      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        align="center"
        label="排程号"
        prop="ProductionPlanNo"
        width="200">
        <template scope="scope">
          <el-button
            plain
            size="mini" type="primary" @click="getScheduleData(scope.row)">{{ scope.row.ProductionPlanNo }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        align="center"
        label="线体"
        prop="LineName"
        width="130">
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        align="center"
        label="模板名称"
        prop="BoardName"
        width="130">
      </el-table-column>
      <el-table-column
        align="center"
        label="排程SN数量"
        prop="SnCount"
        width="97">
        <template scope="scope">
                     <span style="color: #0095FF;cursor:pointer"
                           @click="lookphoto(scope.row)">{{ scope.row.SnCount }}</span>
               
        </template>
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        align="center"
        label="开始合成时间"
        prop="StartComposeTime">
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        align="center"
        label="合成完成时间"
        prop="EndComposeTime">
      </el-table-column>
      <el-table-column
        align="center"
        label="状态"
        prop="Status"
        width="93">
        <template slot-scope="scope">
          <i v-if="scope.row.Status=== 2" class="yuandian" style="backgroundColor:#0095FF"></i>
          <i v-else-if="scope.row.Status=== 3" class="yuandian" style="backgroundColor:#0095FF"></i>
          <i v-else-if="scope.row.Status=== 4" class="yuandian" style="backgroundColor:#F1022F"></i>
          <i v-else-if="scope.row.Status=== 5" class="yuandian" style="backgroundColor:#F1022F"></i>
          <i v-else-if="scope.row.Status=== 6" class="yuandian" style="backgroundColor:#0095FF"></i>
          <i v-else-if="scope.row.Status=== 7" class="yuandian" style="backgroundColor:#F1022F"></i>
          <i v-else class="yuandian" style="backgroundColor:#0de49c"></i>
          <span v-if="scope.row.Status=== 2" style="color:#0095FF">
          {{ scope.row.StatusFormat }}
        </span>
          <span v-else-if="scope.row.Status=== 3" style="color:#0095FF">
          {{ scope.row.StatusFormat }}
        </span>
          <span v-else-if="scope.row.Status=== 4" style="color:#F1022F">
          {{ scope.row.StatusFormat }}
        </span>
          <span v-else-if="scope.row.Status=== 5" style="color:#F1022F">
          {{ scope.row.StatusFormat }}
        </span>
          <span v-else-if="scope.row.Status=== 6" style="color:#0095FF">
          {{ scope.row.StatusFormat }}
        </span>
          <span v-else-if="scope.row.Status=== 7" style="color:#F1022F">
          {{ scope.row.StatusFormat }}
        </span>
          <span v-else style="color:#0de49c">
          {{ scope.row.StatusFormat }}
        </span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="合成进度"
        prop="SnJindu"
        width="80">
        <template slot-scope="scope">
          <el-progress
            :percentage="scope.row.SnJindu"
            :stroke-width="2"
            :width="37"
            type="circle">
          </el-progress>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="生产进度"
        prop="SnJindu"
        width="148">
        <template slot-scope="scope">
          <el-progress
            :percentage="scope.row.SnJindu"
            :stroke-width="15"
            :text-inside="true">
          </el-progress>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="name"
        width="116"
        label="剩余时长（H）">
      </el-table-column> -->
      <el-table-column
        :show-overflow-tooltip="true"
        align="center"
        label="下一个排程"
        prop="NextProductionPlanNo"
        width="155">
      </el-table-column>
      <el-table-column
        :show-overflow-tooltip="true"
        align="center"
        label="创建时间"
        prop="CreateTime">
      </el-table-column>
    </el-table>

    <!-- 照片明细弹出框 -->
    <el-dialog :close-on-click-modal='false' :visible.sync="photoDialogLogVisible" center title="照片明细表" width="600px">
      <el-table
        :data="tableData"
        :header-cell-style="{background:'#f4f4f4'}"
        border
        height="485"
        style="width: 100%">
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          align="center"
          label="照片编码"
          prop="OrderFileCode"
          width="150">
        </el-table-column>
        <el-table-column
          align="center"
          label="照片名称"
          prop="FileName"
          width="160">
        </el-table-column>
        <el-table-column
          align="center"
          label="照片高度"
          prop="PixHeight">
        </el-table-column>
        <el-table-column
          align="center"
          label="照片宽度"
          prop="PixWidth">
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog :close-on-click-modal='false' :visible.sync="scheduleVisible"
               center
               title="排程中的产品" width="1550px">
      <el-tag effect="dark">排程号:{{scheduleData.ProductPlanNo}}</el-tag>
      <AzureDynamicTable
        :column-des-objs="columnDesObjs"
        :data="scheduleData.ProductPlanProcutInfos"
        :show-seq="true"
        height="485"
      />
    </el-dialog>

  </div>
</template>

<script>
import {getOrderFilesByProductionPlanId, GetProductPlanProductInfo} from '@/api/schedule'
import AzureDynamicTable from "@/components/mDynamicTable/AzureDynamicTable";

export default {
  components: {AzureDynamicTable},
  props: {
    reset: {
      type: Array
    },
  },
  data() {
    return {
      tableData: [],
      photoDialogLogVisible: false,
      currentRow: {},
      // loading:true

      scheduleData: {
        ProductPlanNo: '????',
        ProductPlanProcutInfos: []
      },
      scheduleVisible: false,
      columnDesObjs: [
        // {key: 'ProductPlanNo', label: '排程号'},
        {key: 'NetOrderId', label: '订单号',tag:true},
        {key: 'ShopName', label: '商户名'},
        {key: 'ProductName', label: '产品名'},
        {key: 'ProductPartName', label: '组件名'},
        {key: 'OrderTime', label: '下单时间'},
        {key: 'FileNum', label: '文件数量',tag:true},
        {key: 'CtmName', label: '客人名'},
      ]

    }
  },
  methods: {
    async getScheduleData({ProductionPlanNo}) {
      try {
        this.scheduleVisible = true
        const {Result} = await GetProductPlanProductInfo({productPlanNo: ProductionPlanNo});

        this.scheduleData = Result
      } catch (e) {
        console.log(e)
      }
    },
    handleSelectionChange(val) {
      this.$emit('changeData', val)
      let listId = []
      val.forEach(el => {
        listId.push(el.ProductionPlanId)
      });
      this.$emit('getId', listId)
    },
    lookphoto(row) {
      console.log(row);
      this.handleCurrentChange(row);
    },
    handleCurrentChange(row) {
      this.currentRow = row;

      getOrderFilesByProductionPlanId({productionPlanId: this.currentRow.ProductionPlanId}).then(res => {
        if (parseInt(res.Code) === 1) {
          this.photoDialogLogVisible = true
          this.tableData = res.Result
        }
      })
    },
    indexMethod(index) {
      return (index + 1) + (this.$parent.currentPage - 1) * this.$parent.size
    }
  }
}
</script>
<style lang="scss">
.schTable {
  /deep/ td {
    padding: 0;
  }

  /deep/ table .cell {
    line-height: 14px;
    margin-top: 2px;
  }
}
</style>
<style>
.yuandian {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;

}
</style>
